<template>
  <!-- 导航栏组件 -->

  <div class="Nav">
    <div class="itemList">
      <ul>
        <li v-for="(item, index) in list" :key="index">
          {{ item }}
        </li>
      </ul>
    </div>

    <!-- 搜索框 -->
    <div class="inp">
      <Inp msg="点击搜索" @controls="onControls" @emptyInput="myEmptyInput"></Inp>
    </div>

    <!-- 头像显示 -->
    <div class="Individual">
      <DropMenu :dropdownList="dropdownItem"></DropMenu>
    </div>
  </div>
</template>

<script setup lang="ts">
import Inp from './SearchComponent.vue'
import DropMenu from './DropMenu.vue'
// 导入useRouter
import { ElMessage } from 'element-plus'
import { defineProps, ref } from 'vue'

const propsList = defineProps<{
  list: string[]
}>()

const searchValue = ref('')

const onControls = (value: string) => {
  searchValue.value = value
}

const myEmptyInput = () => {
  ElMessage({
    message: '请输入内容！',
    type: 'error',
    duration: 3000,
    showClose: true // 是否显示关闭按钮
  })
}

const dropdownItem = ['个人中心', '我的关注', '退出登录']
</script>

<style src="./css/NavigationBar.scss" scoped></style>
